<!DOCTYPE html>
<html>

	<head>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
		<meta name="format-detection" content="telephone=no" />
		<meta name="apple-mobile-web-app-status-bar-style" content="white" />
		<meta name="renderer" content="webkit" />
		<meta name="apple-touch-fullscreen" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<meta name="format-detection" content="telephone=no,email=no,address=no" />
		<meta name="ML-Config" content="fullscreen=yes,preventMove=no" />

		<meta http-equiv="Expires" content="0" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Cache-control" content="no-cache" />
		<meta http-equiv="Cache" content="no-cache" />
		<meta charset="UTF-8" />
		<title></title>

		<style>
			body,
			html {
				background-color: #ffffff;
				/* height: 100%; */
				padding: 0;
				margin: 0;
			}

			.page {
				border: 0;
				margin: 0 auto;
				border-bottom: 5px solid #f2f5fa;
			}

			.back {
				flex: 1;
				display: flex;
				height: 44px;
			}

			.back img {
				width: 22px;
				height: 22px;
				margin: 11px 0 0 10px;
			}

			.back button {
				border: none;
				background-color: #ffffff;
				font-size: 19px;
			}

			.navbar {
				display: flex;
				justify-content: space-between;
			}

			.navbar .text {
				flex: 1;
				line-height: 44px;
				font-size: 19px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				text-align: center;
			}

			.navbar .ab {
				flex: 1;
			}

			canvas {
				max-width: 750px !important;
				height: auto !important;
			}
		</style>
	</head>
	<!-- <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script> -->
	<script type="text/javascript" src="uni.webview.1.5.2.js"></script>
	<script type="text/javascript" src="jquery-3.5.1.min.js"></script>
	<script type="text/javascript" src="pdf.js"></script>

	<body id="body">
		<div class="navbar" id="navbar">
			<div class="back" id="back">
				<img src="./back.png" alt="" />
			</div>
			<div class="text"></div>
			<div class="ab"></div>
		</div>
	</body>
	<script type="text/javascript">
		var userAgent = navigator.userAgent.toLowerCase();
		if (userAgent.indexOf('junyou.app') !== -1) {
			//  这是app环境
			var navbar = document.getElementById('navbar')
			navbar.style.display = 'none'
		}
		var imageUrl = getUrlParam("imgUrl") + "/left.png";
		$("#backImg").attr("src", imageUrl);
		var name = decodeURIComponent(getUrlParam("name"));
		$(".text").html(name);
		document.addEventListener("UniAppJSBridgeReady", function() {
			document
				.querySelector(".back-icon")
				.addEventListener("click", function(evt) {
					var target = evt.target;
					uni.navigateBack({
						delta: 1,
					});
				});
		});
		// 返回
		const backDiv = document.getElementById('back')
		backDiv.onclick = () => {
			window.history.back()
		}
		var pdfDoc = null;
		var pages = 0;

		function loadFile(url) {
			PDFJS.workerSrc = "pdf.worker.js";
			PDFJS.getDocument(url).then((pdf) => {
				pdfDoc = pdf;
				pages = pdfDoc.numPages;
				renderPage(1);
				createSeriesCanvas(pages, "the-canvas");
			});
		}
		/**
		 * 创建和pdf页码等数的canvas
		 */
		function createSeriesCanvas(num, template) {
			var id = "";
			for (var j = 1; j <= num; j++) {
				id = template + j;
				$("#body").append('<canvas id="' + id + '" class="page"></canvas>');
			}
		}

		function renderPage(num) {
			pdfDoc.getPage(num).then((page) => {
				let canvas = document.getElementById("the-canvas" + num);
				let ctx = canvas.getContext("2d");
				let dpr = window.devicePixelRatio || 1;
				let bsr =
					ctx.webkitBackingStorePixelRatio ||
					ctx.mozBackingStorePixelRatio ||
					ctx.msBackingStorePixelRatio ||
					ctx.oBackingStorePixelRatio ||
					ctx.backingStorePixelRatio ||
					1;
				let ratio = dpr / bsr;
				let viewport = page.getViewport(
					(screen.availWidth - 50) / page.getViewport(0.9).width
				);
				canvas.width = viewport.width * ratio;
				canvas.height = viewport.height * ratio;
				canvas.style.width = viewport.width + "px";
				canvas.style.height = viewport.height + "px";
				ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
				let renderContext = {
					canvasContext: ctx,
					viewport: viewport,
				};
				page.render(renderContext);
				if (pages > num) {
					renderPage(num + 1);
				}
			});
		}

		function getUrlParam(name) {
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); // 构造一个含有目标参数的正则表达式对象
			var r = window.location.search.substr(1).match(reg); // 匹配目标参数
			if (r != null) return r[2];
			return null; // 返回参数值
		}

		loadFile(getUrlParam("url"));
	</script>

</html>